<template>
  <div id="map">
    <el-amap
      vid="amapDemo"
      :mapStyle="mapStyle"
      :events="mapEvents"
      :zoom="6"
      :center="[114.508052, 38.048343]"
    >
     <!-- <el-amap-polyline :path="polyline.path"></el-amap-polyline> -->
      <el-amap-marker class="mark" v-for="marker in markers"  :position="marker.position">
    </el-amap-marker>

    </el-amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mapStyle: "amap://styles/macaron",
         markers: [],
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {
     this.markers = [
     {
      position: [114.508052, 38.048343],
     }, {
      position: [114.308052, 38.153574]
     },{
      position: [114.545663, 37.024455]
     },{
      position: [114.676551, 37.048343]
     },{
      position: [114.608052, 37.041231]
     },{
      position: [114.353311, 37.242451]
     },{
      position: [114.458731, 37.976455]
     },{
      position: [114.648453, 37.897646]
     },{
      position: [114.864532, 37.846512]
     },{
      position: [114.210351, 37.897646]
     }, {
      position: [114.45132, 37.7845123]
     },{
      position: [121.621031, 38.916824]
     },{
      position: [121.746514, 38.784561]
     },{
      position: [121.7894652, 38.823548]
     },{
      position: [121.751593, 38.9865133]
     }
    ];

  },
};
</script>
<style  scoped>
#map {
  height: calc(100vh - 120px);
}
#amapDemo {
  height: 200px;
}

.mark{
  background-color: pink;
}
</style>